<template>
  <div class="home">
    <!-- header开始 -->
    <div class="header">
      <div class="item">
        <!-- 总销售额 -->
        总销售额
        <div class='num'>{{objCount.payTotal | num}}</div>
        <div class="bottom">今日销售额 :{{objCount.pay}}</div>
      </div>
      <div class="item">
        <!-- 总访问量 -->
        总访问量
        <div class='num'>{{objCount.viewsTotal | num}}</div>
        <div class="bottom">今日销售额 :{{objCount.views}}</div>
      </div>
      <div class="item">总收藏量
        <div class='num'>{{objCount.collectTotal | num}}</div>
        <div class="bottom">今日销售额 :{{objCount.collect}}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{objCount.saleTotal | num}}</div>
        <div class="bottom">今日销售额 :{{objCount.sale}}</div>
      </div>
    </div>
    <!-- header结束 -->

    <!--2. 访问数据统计 ----------------->
    <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">月销售额</div>
        <div id="main" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area" id="box1">产品销售比例
        <div id="main2" style="width: 100%; height: 300px"></div>
      </div>
    </div>



    <!-- 3.  -->
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div></div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
             <div></div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
             <div></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div></div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
             <div></div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
             <div></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      objCount:{}
    }
  },
  //过滤器
  filters:{
    num(val){
      if(!val) return '';
      return val.toLocaleString()
    }
  },
  mounted(){
   //获取顶部统计数据信息--------
   this.getHomeCount()
  },
  methods:{
    async getHomeCount(){
      let res=await this.$api.getHomeCount()
      console.log(res.data.data.list)
      this.objCount=res.data.data.list;
    }
  }
}
</script>

<style lang="less" scoped>
.home{
  background:#f8f8f8;
  margin:10px;
  .header{
    display:flex;
    padding-right:30px;
    .item{
      flex:1;
      height: 100px;
      padding: 10px;
      background:#fff;
      border-radius:10px;
      margin-left: 20px;
      font-weight: bold;
      color:#fff;
      position:relative;
    }
    .num{
      font-size:22px;
      margin:10px;
      color:#fff;
    }
    .bottom{
      // flex:1;
      position:absolute;
      border-top:1px solid rgb(255,255,255,0.5);
      padding: 10px 20px;
      bottom:0;
      right: 0;
      left: 0;
      font-size:16px;
      color:#fff;
      font-weight:normal;
    }
  }
   .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }

  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }

  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }

  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

.content{
  display:flex;
  margin:20px;
  height:320px;

  .time-info{
    flex:2;
    background:#fff;
    margin-right:20px;
    padding:10px;
  }
  .area{
    flex:1;
    background:#fff;
    padding:10px;
  }
}

//内容
.home-footer{
  display:flex;
  padding-left:20px;
  margin-bottom:20px;

  .box-card{
    flex:1;
    margin-right:30px;

    span{
      font-weight:600;
    }
  }

  .item{
    text-align:center;
    font-size:24px;
    color:#333;

    el-col{
      border-right:1px solid #fff;
    }

    el-col:last-child{
      border-right:none;
    }
    .title{
      margin-bottom:10px;
      font-size:14px;
    }
  }

}

</style>